import { Button, Form, Input, Modal, Select } from 'antd';
import { useState } from 'react';

interface IProps {
  roleList: ROLE.RoleType[];
  onSubmit: (value: SYSTEMUSER.AddRoleParams) => void;
}

const AddUserModal: React.FC<IProps> = ({ roleList, onSubmit }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [userForm] = Form.useForm();

  const onOk = async () => {
    const fields = await userForm.validateFields();
    onSubmit(fields);
    setIsOpen(false);
  };

  return (
    <>
      <Button
        type="primary"
        key="add_user_btn"
        onClick={() => {
          setIsOpen(true);
          userForm?.resetFields?.();
        }}
      >
        新增用户
      </Button>
      <Modal
        title="新增用户"
        open={isOpen}
        onCancel={() => {
          setIsOpen(false);
        }}
        onOk={onOk}
        destroyOnClose
      >
        <Form
          form={userForm}
          //   initialValues={{
          //     userName: '',
          //     userPassword: '',
          //   }}
        >
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
              {
                pattern: /\w/,
                message: '可输入英文字母，数字，下划线组合的用户名',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户系统登录密码"
            name="userPassword"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
              {
                pattern: /\w/,
                message: '可输入英文字母，数字，下划线组合的密码',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="授权角色"
            name="systemRole"
            rules={[
              {
                required: true,
                message: '请选择授权角色',
              },
            ]}
          >
            <Select options={roleList.map((item) => ({ label: item.name, value: item.id }))} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default AddUserModal;
